<template>
	<view>
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			
			<block slot="content">订单详情</block>
		</cu-custom>
		
		<view class="cu-bar bg-white solid-bottom margin-top">
			<view class="action">
				<text class="cuIcon-title text-orange "></text>授权产品
			</view>
		</view>
		
		<view   class="cu-list menu-avatar">
			<block v-for="(item,index) in authlist" :key="index">
			<view class="cu-item">
				
				<view class="cu-avatar radius lg" :style="[{'background-image':'url('+item.authlist.urlimage+')'}]"></view>
				<view class="content">
					<view class="text-grey">{{item.authname}}</view>
					<view class="text-gray text-sm flex">
						<view class="text-gray text-sm flex">
							<text class="text-cut"></text>
							
						</view> </view>
				</view>
				<view class="action">
					<view class="text-grey text-xs">x{{item.devicenum}}</view>
					<view class="cu-tag round bg-red sm">{{item.price}}¥</view>
				</view>
			</view>
			
		   </block>
		</view>
		
		<view class="cu-form-group margin-top">
			<view class="title">微信支付</view>
			<radio class="checked" ></radio>
		</view>
		
		
		<view class="cu-bar margin-top bg-white db" style="height: 50px;">
			<view style="width: 60%;padding-left: 16%;">实付款:   <text style="color: red;font-size: 17px;padding-left: 3%;line-height: 50px;">¥{{total}}  免运费</text></view>
			
			<view style="width: 40%;background-color: red;color:#F5F5F5;height:50px;font-size: 20px;text-align: center;line-height: 50px;" @tap="payorder" >立即支付 </view>
			
		</view>
		
		
	</view>
</template>

<script>
	var _self;
	export default {
		data() {
			return {
				authlist:[],
				appId:'',
				timeStamp:'',
				nonceStr:0,
				package:'',
				signType:'',
				paySign:'',
                total:0
				
				
			}
		},
		onLoad(option) {
			
			_self=this;
			
			console.log(option)
			
			var opt=JSON.parse(option.jsapiau);
			
			console.log("appid"+opt.appId);
			
			this.appId=opt.appId;
			this.timeStamp=opt.timeStamp;
			this.nonceStr=opt.nonceStr;
			this.package=opt.package;
			this.signType=opt.signType;
			this.paySign=opt.paySign;
			
			
			
			uni.request({
				url: this.$constant.BASEURL + this.$constant.GET_queryorderid,
				method: "POST",
				data:{
					id:option.id
				},
				header: {
					'content-type': 'application/x-www-form-urlencoded'
				},
				complete: (res) => {
					console.log( JSON.stringify(res.data))
					if (res.data.code == 0) {
						
					
					  this.authlist=res.data.data.authorderdetails;
					  
					  this.total=res.data.data.total;
					  
					}
				}
			});
			
			
		},
		
		methods: {
			payorder(){
				WeixinJSBridge.invoke( 'getBrandWCPayRequest', {
				
						  "appId":this.appId,     //公众号名称,由商户传入     
				
				          "timeStamp":this.timeStamp,         //时间戳,自1970年以来的秒数     
				
				          "nonceStr":this.nonceStr, //随机串     
				
				          "package":this.package,     
				
				          "signType":this.signType,         //微信签名方式：     
				
				          "paySign":this.paySign //微信签名 
				
				         }, 
				
				         function(res){      
							
				
				      	   if(res.err_msg == "get_brand_wcpay_request:ok" ) {
				
				                 console.log('支付成功');
				
				                 window.close();
				
				                 //支付成功后跳转的页面
								 uni.redirectTo({
								 	url:'delivered'
								 })
								 
								
								 
				
				             }else if(res.err_msg == "get_brand_wcpay_request:cancel"){
				
				          	   console.log('支付取消');
				
				             }else if(res.err_msg == "get_brand_wcpay_request:fail"){
				
				          	   console.log('支付失败');
				
				                 WeixinJSBridge.call('closeWindow');
				
				             } //使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
				
				   });   
				
				
				
			}
			
		}
	}
</script>

<style>


   .db{position:absolute;bottom:0px;left:0px;
   width: 100%;
   }
</style>
